<template>
  <div class="car-serve-list">
  
  <div class="page-content">

        <div class="car-item" v-for='(item, index) of severList' :key='index'>
          <l-car-serve-card :info='item' ></l-car-serve-card>
        </div>
    
    <div class="page-bar">
      <i-page @on-change='changePage' :current='currentPage' :total='pageTotal' :pageSize='pageSize' ></i-page>
    </div>
      
  </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import CarServeCard from '@/components/car_serve_main_card/index.vue';
import ICarServCard from '@/components/car_card/index.vue';
import SearchBar from '@/components/search_bar/index.vue';
import PageBar from '@/components/page_bar/index.vue';
import PagePath from '@/components/page_path/index.vue';
import commendData from '@/utils/commend.ts';


@Component({
  components:{
    'l-car-serve-card': CarServeCard,
    'l-search-bar': SearchBar,
    'l-page-bar': PageBar,
    'l-page-path': PagePath
  }
})
export default class CarServeList extends Vue {

  pageSize: number = 9
  currentPage: number = 1
  severList: Array<ICarServCard> = [] 
  pageTotal: number = 1
  $API: any

  created(){
    
    let initData = this.buildReq();
    this.getCarList(initData)

  }

  changePage(pageNum:number){

    this.currentPage = pageNum;
    let initData = this.buildReq();
    this.getCarList(initData)

  }

  // 类型选择, 请求数据
  select(data:any){
      
      // 初始化页号
      let req = this.buildReq({
        currentPage: 0,
      }) 
  
      this.getCarList(req)
  }

  buildReq(config={}){
    let req: any = {
      pageSize: this.pageSize,
      currentPage: this.currentPage
    };
    
    return Object.assign(req, config)

  }

  // 请求列表
  getCarList(req?:any){
    let $API:any = this.$API; 
    
    return $API.getServeList(req).then( (res: any) =>{

      this.severList = res.serves;
      this.pageTotal = res.pages.total;
      
    })
     
  }

  
}

</script>
<style lang="less">

.car-serve-list{

}

.car-item{
  padding: 20*@rem;
  border-top: 6*@rem solid @color_5;
}


.advertisement{
  height: 100%;
  background: #eee;
}

</style>
